.oban-arrow-base() {
  position: relative;

  &:after, &:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    bottom: 100%;
    border: solid transparent;
  }
}

.oban-arrow-top(@color, @size: 10px, @border: transparent, @border-width: 0px, @location: 50%) {
  .oban-arrow-base();

  &:after {
    left: @location;
    border-bottom-color: @color;
    border-width: @size;
    margin-left: -@size;
  }

  &:before {
    left: @location;
    border-bottom-color: @border;
    border-width: @size + @border-width;
    margin-left: -@size - @border-width;
  }
}

.oban-arrow-right(@color, @size: 10px, @border: transparent, @border-width: 0px, @location: 50%) {
  .oban-arrow-base();

  &:after {
    left: 100%;
    top: @location;
    border-left-color: @color;
    border-width: @size;
    margin-top: -@size;
  }

  &:before {
    left: 100%;
    top: @location;
    border-left-color: @border;
    border-width: @size + @border-width;
    margin-top: -@size - @border-width;
  }
}

.oban-arrow-left(@color, @size: 10px, @border: transparent, @border-width: 0px, @location: 50%) {
  .oban-arrow-base();

  &:after {
    right: 100%;
    top: @location;
    border-right-color: @color;
    border-width: @size;
    margin-top: -@size;
  }

  &:before {
    right: 100%;
    top: @location;
    border-right-color: @border;
    border-width: @size + @border-width;
    margin-top: -@size - @border-width;
  }
}

.oban-arrow-bottom(@color, @size: 10px, @border: transparent, @border-width: 0px, @location: 50%) {
  .oban-arrow-base();

  &:after {
    top: 100%;
    left: @location;
    border-top-color: @color;
    border-width: @size;
    margin-left: -@size;
  }

  &:before {
    top: 100%;
    left: @location;
    border-top-color: @border;
    border-width: @size + @border-width;
    margin-left: -@size - @border-width;
  }
}
